<template>
    <div id="claims">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="申请时间" required>
                <el-col :span="11">
                    <el-form-item prop="applyDate">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="ruleForm.applyDate"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="事故时间" required>
                <el-col :span="11">
                    <el-form-item prop="troubleDate">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="ruleForm.troubleDate"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="理赔图片" prop="claimsImages">
                <el-upload
                    class="upload-demo"
                    action="http://localhost:3000/claims/claimsImages"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    list-type="picture"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，且不超过500kb
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="所属订单">
                <el-select v-model="ruleForm.order" placeholder="请选择">
                    <el-option
                        v-for="item in claims"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//引入仓库助手
import { createNamespacedHelpers } from "vuex";
//引入辅助函数
const { mapActions } = createNamespacedHelpers("claims");

export default {
    data() {
        return {
            //所属定安
            claims: [
                {
                    value: "销售",
                    label: "天下第一销售",
                },
            ],
            ruleForm: {
                applyDate: "",
                troubleDate: "",
                claimsImages: "",
                order: "",
            },
            //验证规则
            rules: {
                applyDate: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
                troubleDate: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        ...mapActions(["addClaims"]),
        handleAvatarSuccess(res, file) {
            this.ruleForm.claimsImages = res.data
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    this.addClaims(this.ruleForm);
                    this.$router.push("/insuranceSystem/claims");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },

    },
};
</script>

<style lang="scss">
#claims {
    .el-form {
        padding: 20px 0 0 0;
        width: 500px;
        margin: auto;
    }
}
</style>